/**
* @description: 通信网管室巡视巡检记录表 - 负责人 列表
* @author: zhangxia
* @date:
**/
<template>
	<view class="task-monitor-main">
		<nav-bar class="header" back title="通信网管室巡视巡检工单" @goBack="goBack">
			<view slot="text" class="currentyear">
				{{yearValue}}
			</view>
			<van-icon class="imgLeft" name="arrow-down" slot="selectyear" @click="selectYear" />
		</nav-bar>
		<view class="distribution" v-if="isShow === true">
			<img src="../../../static/img/distributionicon.png" alt="">
			<view class="dbtitle">通信网管巡视巡检工单待分配</view>
			<view class="distributionbtn" @click="distribution">分配</view>
		</view>
		<view class="main-container">
			<!-- 搜索框  -->
			<view class="search">
				<van-search  show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
					placeholder="请输入工单名称" @click="showSearch=true" @cancel="onSearch('')"  @search="onSearch"/>
			</view>
			<view class="task-list-container" v-if="taskList">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<!-- 列表循环   -->
						<view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
							<view class="task-title">
								<view class="task-title-main">
									<img src="../../../static/img/wgxsxjgd.png" alt="">
									<text class="timetype">{{item.INSPECTION_MONTH}}</text>
									<text class="task-title-main-text">{{ item.NAME }}</text>
								</view>
								<text class="task-status">

								</text>
							</view>
							<hr class="task-hr">
							<view class="top-task-main">
								<text class="task-big-ltitle">网管执行人员:</text>
								<text class="task-small-ltitle">{{ item.EXECUTIVE_NAME }}</text>
							</view>
							<view class="top-task-main">
								<text class="task-big-ltitle">运维专责:</text>
								<text class="task-small-ltitle">{{ item.EXPERT_NAME }}</text>
							</view>

						</view>
					</van-list>
				</van-pull-refresh>
			</view>
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>

		<van-popup v-model="showPicker" position="bottom">
			<van-picker
			  title="年份选择"
			  show-toolbar
			   :default-index="defaultIndex"
			  :columns="columns"
			  @confirm="onDatetimeConfirm"
			  @cancel="onDatetimeEmpty"
			  @change="onChange"
			/>
		</van-popup>
		<van-popup v-model="showApprove" position="bottom">
			<view class="headertitle approveheader">
				<view>分配</view>
				<van-icon name="cross" color="#999999" class="closeicon" @click="closeapprove"></van-icon>
			</view>
			<view class="approvecontent">
				<view class="content">
					<van-field v-model="datedate"  label="巡视时间" readonly input-align="right"/>
					<van-field v-model="nmperson" right-icon="arrow" disabled @click="openSelectPerson" input-align="right" required label="网管执行人员"  placeholder="" />
					<van-field v-model="omperson" right-icon="arrow" disabled @click="openSelectOm" input-align="right" required label="运维专责"  placeholder="" />
				</view>
				<van-button  type="primary" @click="closeapprove" size="small" color="#417ADC" block class="insurebtn">确定</van-button>
			</view>
		</van-popup>
		<van-popup v-model="showSelectUser" position="right">
		  <selectUser :equIds="equIds" :selected.sync="staffList" @cancel="onSelUserCancel" :roleId="executiveRoleId"/>
		</van-popup>
		<van-popup v-model="showOmSelectUser" position="right">
		  <selectUser1 :equIds="omEquIds" :selected.sync="omStaffList" @cancel="onSelUserOmCancel" :roleId="expertRoleId"/>
		</van-popup>
		

	</view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import searchEquMatch from '../../common/searchEquMatch'
import screenPopup from "../common/screenPopup.vue";
import plateTitle from "../common/plateTitle.vue";
import selectUser from "../common/selectUser.vue";
import selectUser1 from "../common/selectUserOm.vue";
import moment from 'moment';
import {mapGetters} from "vuex";
import { Dialog, Toast } from 'vant'

export default {
	name: 'communicationNetWorkPerson',
	components: {
		navBar,
		searchEquMatch,
		screenPopup,
		plateTitle,
		selectUser,
		selectUser1
	},
	props: {},
	mounted(){

	},
	data() {
		return {
			defaultIndex:'',
			staffList:{},
			omStaffList:{},
			equIds: [], // 光缆设备人员
			omEquIds:[],//运维审批人员
			nmperson:'',
			omperson:'',
			titleName:'通信网管巡视巡检工单待分配',
			datedate:"",
			searchValue: "",
			showSearch: false,
			beginTime: '',
			endTime: '',
			yearValue:'2023',
			columns:["2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025","2026","2027","2028","2029","2030","2031","2032","2033"],
			timeString: '',
			currentDate: '',
			minDate: new Date(0),
			showApprove:false,
			showPicker: false,
			showSelectUser:false,
			showOmSelectUser:false,
			taskList: [],
			color: (TASK_STATE) => {
				if (TASK_STATE === "1") return "blue";
				if (TASK_STATE === "2") return "red";
				if (TASK_STATE === "3") return "yellow";
				if (TASK_STATE === "99") return "green";
			},
			refreshing: false, // 是否正在刷新
			isLoading: false,
			finished: false,
			total: 0, // 总条数
			page: 1,
			limit: 20,
			current: 0,
			typeList: [{
					title: '发起时间：',
					type: 'beginTime',
					optionList: [{
							TITLE: '本周',
							VALUE: 0,
							isActive: true,
						},
						{
							TITLE: '本月',
							VALUE: 1,
							isActive: false,
						},
						{
							TITLE: '上月',
							VALUE: 2,
							isActive: false,
						}
					]
				},
				{
					title: '其他时间：',
					type: 'otherTime',
					optionList: [{
							TITLE: '按天',
							VALUE: 0,
							isActive: false,
						},
						{
							TITLE: '按月',
							VALUE: 1,
							isActive: false,
						},
					]
				}
			],
			menuList: [

			],
			expertRoleId:'',
			executiveRoleId:"",
			isShow:false,
			taskType: '', // 右侧筛选工单类型
			taskStae: '', // 工单状态 "0"-未完成  "1"-已完成  ""-全部

			allChecked: true, // 单位筛选全选,

		};
	},
	onLoad() {

		//获取分配按钮权限
		this.getAssignButtonPermissions();
		//获取巡视巡检列表(负责人)
		this.getNetWorkPersonList();
		

	},
	computed: {
		...mapGetters(['userData'])
	},
	watch: {

	},
	methods: {
		
		getAssignButtonPermissions(){
			let params = JSON.stringify({
			  userId: this.userData.USERID
			})
			this.$api.getAssignButtonPermissions(params).then(res => {
			    
			  this.isShow = res.data.isShou;
			  this.executiveRoleId = res.data.executiveRoleId;
			  this.expertRoleId = res.data.expertRoleId;
        this.datedate = res.data.startTime +'至'+ res.data.endTime
			})
		},
		onSelUserCancel(namelist) {
			this.nmperson = this.staffList.text;

			// this.distributionOrder(this.staffList.ids,'user');
		  this.showSelectUser = false;

		},
		onSelUserOmCancel(){
			  
			this.omperson = this.omStaffList.text;
			// this.distributionOrder(this.omStaffList.ids,"Om");
			this.showOmSelectUser = false;
			
		},
		getNetWorkPersonList(){
			  
			let params = JSON.stringify({
			  name:this.searchValue,
			  year:this.yearValue
			})
			this.$api.getNetWorkPersonList(params).then(res => {
				this.isLoading = false;
				this.refreshing = false;
			  this.taskList = res.data;
			})
		},

		distributionOrder(){
			  
			// userId	是	string	用户id
			// allocateTime	是	string	巡视开始时间 格式：yyyy-MM-dd
			// allocatePersonnelId	否	string	巡视人员id，多个人员用“，”号拼接
			let tempobj = {
				userId: this.userData.USERID,
				allocateTime:this.datedate.split("至")[0],
				allocatePersonnelId:this.staffList.ids.length>1 ? this.staffList.ids.join(','):this.staffList.ids[0],
				responsibilityPersonnelIds:this.omStaffList.ids.length>1 ? this.omStaffList.ids.join(','):this.omStaffList.ids[0],
			};
			
			
			let params = JSON.stringify(tempobj)
			this.$api.distributionOrder(params).then(res => {
			    
			  this.onRefresh()
			  this.getAssignButtonPermissions()
			})
		},
		closeapprove(){
			this.showApprove = false;
			this.distributionOrder()
			this.datedate = ''
			this.nmperson = ''
			this.omperson = ''
			
		},
		
		openSelectPerson(){
			this.showApprove = true;
			this.showSelectUser = true;

			
		},
		openSelectOm(){
			// this.showApprove = true;
			this.showOmSelectUser = true;
		},
		distribution(){
			this.showApprove = true;
			this.getAssignButtonPermissions()
		},
		 onChange(picker, value, index) {
			 this.yearValue = value;
			   
		},
		onDatetimeConfirm(value) {
			this.yearValue = value;
			this.getNetWorkPersonList();
			this.showPicker = false
		},
		onDatetimeEmpty() {
			this.showPicker = false
			this.yearValue = "";
		},



		goBack() {
			uni.navigateTo({
				url:'/pages/operationApprove/index/index'
			})
		},
		add() {

		},
		onSearch(searchValue) {
			this.searchValue = searchValue;
			this.onRefresh();
			this.showSearch = false;


		},
		loadMore() {
			if (this.total > this.taskList.length) {
				this.page = this.page + 1;

			} else {
				this.finished = true;
			}
		},
		selectYear() {
			this.showPicker = true;
			this.defaultIndex = this.columns.findIndex((item)=>{
				return item == this.yearValue;
			})
		},
		onRefresh(){
			this.refreshing = true;
			this.finished = false;
			this.page = 1;
			this.taskList = [];
			this.getNetWorkPersonList()
		},
		confirmCondition(selected) {
			// this.taskType = selected.TASK_TYPE_NAME == '0' ? "" : selected.TASK_TYPE_NAME
			this.onRefresh()
		},
		//  列表跳转
		jump(item) {

			uni.navigateTo({
				url: `/pages/operationApprove/communicationNetWorkPerson/singleMonthPatrolList?time=${item.INSPECTION_MONTH}`
			})
		}
	}
};
</script>
<style scoped lang="scss">
.task-monitor-main {
	min-height: 100vh;
	background: #F2F6FA;
	.header {
		position: sticky;
		top: 0;
    .imgLeft {
			width: px2vw(48);
			margin-right: px2vw(40);
		}
		.header-right {
			display: flex;
			/deep/ .van-icon {
				font-size: px2vw(52);
				font-weight: bold;
			}
			/deep/ .van-icon-scan {
				margin-right: px2vw(12);
			}
			/deep/ .van-icon-filter-o {
				margin-left: px2vw(12);
			}
		}
		.currentyear{
			font-size: px2vh(48);
		}
	}
	.approvecontent{
		width: calc(100% - #{px2vw(160)});
		display: flex;
		height: px2vh(800);
		flex-direction: column;
		margin: 0 auto;

		/deep/.van-field{
			color: #333333;
		}
		.content{
			flex: 1;
		}
		.insurebtn{
			height: px2vh(100);
			flex-shrink: 0;
			margin-bottom: px2vh(30);
			border-radius: $border-radius-base;
		}

	}
	.approveheader{
		width: calc(100% - #{px2vw(160)});
		height: px2vh(150);
		font-size: px2vh(48);
		text-align: center;
		margin: 0 auto;
		line-height: px2vh(150);
		background-color: #fff;
		border-bottom: px2vh(1) solid #ebedf0;
		position: relative;
		color: #333333;
		.closeicon{
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: px2vh(-18);
		}

	}
	.header-bar {
		height: px2vh(120);
		border-radius: 0 0 px2vh(40) px2vh(40);
		background: #417ADC;
		margin-bottom: px2vh(130);
		.menu {
			width: px2vw(1020);
			height: px2vh(220);
			background-image: url('../../../static/img/borderR.png');
			background-size: px2vw(1020) px2vh(220);
			margin: 0 auto;
			display: flex;
			justify-content: space-evenly;
			li {
				height: 100%;
				position: relative;
				.right-box {
					height: px2vh(112);
					float: left;
					margin-top: px2vh(59);
					text-align: center;
					.menu-num {
						display: block;
						font-size: px2vw(54);
						font-weight: bold;
						color: #333;
					}

					.menu-state {
						font-size: px2vw(36);
						color: #333;
					}

					.selectmenu {
						color: #417ADC;
					}
				}

				.sj {
					width: px2vw(78);
					height: px2vh(66);
					position: absolute;
					bottom: px2vh(-34);
					//right: px2vw(40);
					left: 50%;
					transform: translateX(-50%);
					background-image: url('../../../static/img/sj.png');
					background-size: px2vw(78) px2vh(66);
				}
			}
		}
	}
	.task-info-container,
	.task-assignment-item {
		border-radius: $border-radius-base;
		overflow: hidden;
		background-color: #ffffff;
	}
	.distribution{
		height: px2vh(130);
		display: flex;
		align-items: center;
		padding: 0 px2vw(30);
		color: #FF7070;
		font-size: px2vh(42);
		background-color: #FFFFFF;
		img{
			width:px2vh(32);
			margin-right: px2vh(16);
			flex-shrink: 0;
		}
		.dbtitle{
			flex: 1;
		}
		.distributionbtn{
			width: px2vh(180);
			text-align: center;
			background: #ff7070;
			border-radius: px2vh(35);
			font-size: px2vh(36);
			color: #fff;
			padding:px2vh(17) 0;
			 box-sizing: border-box;
			 display: inline-block;
		}
	}
	.main-container {
		height: calc(100vh - #{px2vh(413)});
		.plate-title {
			margin-bottom: px2vh(36);
			color: #666;
		}
		.plate-title {
			margin-bottom: px2vh(36);
			color: #666;
		}
		.search {
			width: px2vw(1020);
			height: 38px;
			margin: px2vw(30) px2vh(30);
			border-radius: px2vw(20);
			overflow: hidden;
			.van-search {
				padding: 0 0;
				height: 38px;
			}
			.van-search__content {
				background: #fff;
				height: 38px;
			}
			/deep/ .van-field__control {
				height: 30px;
			}
		}
		.screen-type-item {
			margin-bottom: px2vh(30);
			.plate-title {
				margin-bottom: px2vh(36);
				color: #666;
			}
			.screen-option-container {
				display: flex;
				flex-wrap: wrap;
				.screen-option-item {
					width: px2vw(260);
					height: px2vh(90);
					margin-bottom: px2vh(20);
					line-height: px2vh(90);
					background: #f7f7f7;
					color: #666;
					font-size: px2vh(36);
					text-align: center;
					border-radius: $border-radius-base;
				}
				.screen-option-item:not(:nth-child(3n)) {
					margin-right: px2vw(20);
				}
				.screen-option-item.active {
					background: #ecf1fb;
					color: #417ADC;
				}
			}
		}
		.task-list-container {
			height: calc(100vh - #{px2vh(443)} - 38px);
			overflow: auto;
			.task-list {
				width: px2vw(1020);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				padding-bottom: px2vh(30);
				margin: 0 px2vw(30) px2vh(30) px2vw(30);
				.task-title {
					width: px2vw(940);
					height: px2vh(80);
					margin-left: px2vw(40);
					padding-top: px2vw(30);
					margin-bottom: px2vh(30);
					display: flex;
					align-items: center;
					justify-content: space-between;
					.task-title-main {
						display: flex;
						height: px2vw(50);
						align-items: center;
            img {
              width: px2vw(64);
              height: px2vw(64);
              margin-right: px2vw(24);
            }
						.timetype{
							width: px2vw(200);
							height: px2vh(50);
							line-height: px2vh(50);
							border-radius: px2vw(10);
							font-size: px2vw(38);
							text-align: center;
							background-color: rgba(65,122,220,.1);
							color: #417ADC;
							// padding-top:px2vw(9) ;
							box-sizing: border-box;
						}
					}
					.task-title-main-text {
						width: px2vw(600);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: px2vw(20);
						font-size: px2vh(48);
					}
					.task-status {
						width: px2vw(160);
						height: px2vh(50);
						line-height: px2vh(50);
						border-radius: px2vw(10);
						font-size: px2vw(40);
						text-align: center;
						color: #666666;
					}
					.task-status.blue {
						color: #417ADC;
						background: #E4ECFA;
					}
					.task-status.red {
						color: #FF7070;
						background: rgba(255, 112, 112, 0.1);
					}
					.task-status.yellow {
						color: #FFAD0E;
						background: rgba(255, 180, 0, 0.1);
					}
					.task-status.green {
						color: #3CDA68;
						background: rgba(62, 218, 104, 0.1);
					}
				}
				.task-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}
				.top-task-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);
					.task-big-ltitle,
					.task-big-rtitle {
						color: #666;
					}
					.task-small-ltitle,
					.task-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}
					.task-big-rtitle {
						margin-left: px2vw(245);
					}
				}


			}
		}
	}
}
</style>
